<template>
	<NavBar title="请选择关键词" :rightText="rightText" @rightTap="rightTap" />
	<view class="shop-keyword">
		<view class="keyword-box">
			<view 
				class="keyword-item" 
				:class="item.isCheck?'a-item':''" 
				v-for="(item, index) in keyWordList" 
				@tap="tapKeyword(index)"
			>
				{{ item.name }} 
				<image src="/static/icon/shop/del.png" @tap="delKeyWord(item.id)" v-if="rightText == '完成'" class="k-img"/>
			</view>
			<view class="add-keyword" @tap="modalRef.open()" v-if="keyWordList.length<5 && rightText == '编辑'"> </view>
		</view>
		<view class="btn" @tap="confirm"> 确定 </view>
	</view>
	<Modal ref="modalRef" :input="'请输入名称'" @confirm="addKeyWord"/>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '../components/ShopNavBar.vue'
	import Modal from '@/components/Modal.vue'
	import { useShopStore } from '@/store/index.js'
	import { GetGoodsKeyWordApi, AddGoodsKeyWordApi, DelGoodsKeyWordApi } from '@/service/shop.js'
	const modalRef = ref()
	const rightText = ref('编辑')
	const keyWordList = ref([])
	const rightTap = () => {
		if(rightText.value == '编辑') { 
			rightText.value = '完成' 
			keyWordList.value.forEach(item => {
				item.isCheck = false
			})
		} else {
			rightText.value = '编辑'
			keyWordList.value[0].isCheck = true
		}
	}
	const getKeyWordList = () => {
		GetGoodsKeyWordApi().then(res => {
			res.forEach((item, i) => {
				if(i === 0 && rightText.value == '编辑') {
					item.isCheck = true
				} else {
					item.isCheck = false
				}
			})
			keyWordList.value = res
		})
	}
	const addKeyWord = (name) => {
		let params = {
			type: 2,
			name
		}
		AddGoodsKeyWordApi(params).then(res => {
			getKeyWordList()
			modalRef.value.close()
		})
	}
	const delKeyWord = (id) => {
		DelGoodsKeyWordApi({id}).then(res => {
			getKeyWordList()
		})
	}
	const tapKeyword = (i) => {
		if(rightText.value == '完成') return
		keyWordList.value[i].isCheck = !keyWordList.value[i].isCheck
	}
	const confirm = () => {
		const { SETKEYWORD } = useShopStore()
		const valid = keyWordList.value.some(item => item.isCheck )
		if(!valid) return getApp().globalData.toast('请选择关键字')
		let checkedArr = []
		keyWordList.value.forEach(item => {
			if(item.isCheck) {
				checkedArr.push(item)
			}
		})
		if(checkedArr.length > 5) return getApp().globalData.toast('最多选择5个关键字')
		SETKEYWORD(checkedArr)
		uni.navigateBack()
	}
	onLoad(() => {
		getKeyWordList()
	})
</script>

<style scoped lang="scss">
	.shop-keyword {
		padding: 10px 17px;
		.keyword-box {
			display: grid;
			gap: 10rpx;
			grid-template-columns: repeat(3, 1fr);
			.keyword-item, .add-keyword {
				width: 100%;
				height: 32px;
				color: #333333;
				font-size: 14px;
				font-weight: 400;
				line-height: 32px;
				text-align: center;
				border-radius: 5px;
				position: relative;
				background-color: #fff;
				&.a-item {
					color: #FF3B1E;
					box-sizing: border-box;
					border: 1px solid #FF3B1E;
				}
				.k-img {
					width: 16px;
					height: 16px;
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(50%, -50%);
				}
			}
			.add-keyword {
				border: 1px #eeeeee dashed;
				position: relative;
				&::before, &::after {
					display: block;
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 16px;
					height: 2px;
					background: #D8D8D8;
				}
				&::after {
					width: 2px;
					height: 16px;
				}
			}
		}
		.btn {
			position: fixed;
			bottom: 10px;
			left: 12px;
			right: 12px;
			height: 50px;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 500;
			line-height: 24px;
			line-height: 50px;
			text-align: center;
			border-radius: 106px;
			background-color: #FF3B1E;
		}
	}

</style>
